<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
</head>
<body>
<div id="app">

    <ul>
        <!--
        事件处理的核心元素:
        1>事件源:触发事件处理的html标签,比如此处的 <li>标签
        2>事件对象:描述整个出发事件到执行函数的整个过程的对象
        $event  事件发生后,vue会自动定义$event变量将事件对象赋值
        3>事件函数:出发事件后调用的处理逻辑的方法
        4>事件函数传参:函数的参数怎么传递

        -->
        <!--v-on:事件名 -->
        <li v-for="(emp , index) in emps" v-on:click="clickMe_vue($event,emp)">{{emp.id}}--{{emp.name}}--{{emp.age}}</li>

    </ul>
</div>
<script>

    var app = new Vue({
        el:'#app',
        data:{
            emps:[
                {id:1,name:"小小A",age:12},
                {id:2,name:"小小B",age:15},
                {id:3,name:"小小C",age:13}
            ]
        },
        methods:{
            clickMe_vue:function (e,employee) {
                console.log(e); //事件对象
                console.log(this); //this表示vue实例  vue中事件函数里的this表示vue实例
                console.log(e.currentTarget); //事件源


                console.log(employee.id,employee.name,employee.age);

            }
        }
    })
</script>
</body>
</html>